<template>
    <div class="wrap">
        <div class="search-wrap">
            <van-icon class="back" size="32" name="arrow-left" color="#1ba784" @click="back" />
            <van-search class="search" v-model.trim="value" placeholder="请输入搜索关键词" shape="round" @search="toSearch" />
        </div>
        <main>
            <div class="c-search" v-if="isShow">
                <h2>热门搜索</h2>
                <div class="hot-list">
                    <div class="hot-w" v-for="i in hotSearchArr" :key="i.query" @click="toSearch(i.query)">
                        {{ i.query }}
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="loading" v-if="!searchResultArr">
                    <van-loading type="spinner" />
                </div>
                <div v-else>
                    <div class="search-bar">
                        <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect">
                            <template #reference>
                                <van-button type="primary" style="height: 3vh; background-color: #fff; border: none; color: #000">排序方式 : {{ text }}</van-button>
                            </template>
                        </van-popover>
                    </div>
                    <div class="search-list">
                        <ProductC v-for="(item, index) in searchResultArr" :key="index" :item="item" />
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
import { getHotSearch } from "@/api/api";
import { getSearchResult } from "@/api/api";
import ProductC from "@/components/ProductC.vue";
export default {
    data() {
        return {
            value: "",
            page: 1,
            min: 80,
            max: 120,
            hotSearchArr: [],
            searchResultArr: "",
            isShow: true,
            showPopover: false,
            sort: "pop",
            text: "综合",
            actions: [
                { text: "综合", sort: "pop" },
                { text: "新品", sort: "new " },
                { text: "销售", sort: "sell" },
            ],
            // actions: [
            //     { text: "综合"},
            //     { text: "新品" },
            //     { text: "销售" },
            // ],
        };
    },
    components: {
        ProductC,
    },

    beforeRouteEnter(to, from, next) {
        next((vm) => {
            vm.HotSearchApi();
            if (vm.$route.params.value) {
                vm.value = vm.$route.params.value;
                vm.toSearch(vm.value);
            }
        });
    },
    methods: {
        async HotSearchApi() {
            let { data } = await this.axios(getHotSearch());
            this.hotSearchArr = data.data.hotWord.data;
        },
        async SearchResultApi() {
            let { data } = await this.axios(getSearchResult(this.value, this.sort, this.page, this.sort));
            this.searchResultArr = data.result.wall.docs;
        },
        back() {
            if (!this.isShow) {
                this.isShow = true;
                return;
            }
            this.$router.go(-1);
            this.isShow = true;
            this.value = "";
        },
        toSearch(word) {
            this.value = word;
            if (this.value) {
                this.isShow = false;
                this.searchResultArr = "";
                this.SearchResultApi();
            }
        },
        onSelect(action) {
            this.text = action.text;
            this.sort = action.sort;
        },
    },
    watch: {
        sort(newSort, oldSort) {
            if (newSort != oldSort) {
                this.searchResultArr = "";
                this.SearchResultApi();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    background-color: #fafafa;
    width: 100vw;
    height: 100vh;
}
.search-wrap {
    background-color: #fff;
    display: flex;
    padding: 0 5vw;
    .back {
        padding: 10px 0;
        width: 2rem;
    }
    .search {
        width: 21.25rem;
    }
}
main {
    h2 {
        padding: 2vh 5vw;
        font-size: 20px;
        font-family: "微软雅黑";
        font-weight: 600;
    }
    .hot-list {
        padding: 0 5vw;
        & > div:first-child {
            position: relative;
            padding-left: 1.625rem;
            &::before {
                left: 0.75rem;
                top: 0.5625rem;
                position: absolute;
                content: "";
                background-image: url("@/assets/img/hot.png");
                display: inline-block;
                width: 1rem;
                height: 1rem;
            }
            color: #d81e06;
            //
            font-weight: 600;
        }
        & > div:nth-child(2) {
            color: #de3f7c;
            // ce5e8a
            font-weight: 600;
        }
        & > div:nth-child(3) {
            color: #c5708b;
            font-weight: 600;
        }
        .hot-w {
            margin: 0 0.625rem 0.625rem 0;
            color: rgba($color: #000000, $alpha: 0.6);
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 0 1px rgba($color: #000000, $alpha: 0.1);
            display: inline-block;
            padding: 0.625rem;
        }
    }
    .loading {
        position: fixed;
        left: 50vw;
        top: 50vh;
        transform: translate(-50%, -50%);
    }
    .search-bar {
        padding: 0 5vw;
        background-color: #fff;
    }
    .search-list {
        width: 100vw;
        box-sizing: border-box;
        padding: 2vh 5vw 0;
        border-radius: 20px;
        background-color: #f8f8f8;
        column-count: 2;
    }
}
</style>
